<template>
  <!-- WMS仓库首页 -->
  <div class="layout">
    <div class="shouye">
      <span>{{ $t('menu.warehouseWMS') }}</span>
    </div>
    <!--    <hr class="hr1">-->
    <div style="background: white;padding: 5px;">
      <div class="options">
        <jc-title title1="经营异常报告" :division="false" />
        <!--        <div>-->
        <!--          <el-input v-model="pevent" size="mini" style="width: 168px;margin-right: 5px;" />-->
        <!--          <el-button type="primary" size="mini" @click="pooAmount">搜索</el-button>-->
        <!--        </div>-->
      </div>
      <div>
        <jc-table
          serial
          :table-data="tableData"
          :table-header="tableHeader"
          table-height="300px"
          @clickRow="pooAmount"
        >
          <template v-slot:btnStates="col">
            <el-link type="primary" @click="openDialods(col.scope.row)">{{ col.scope.row.exception }}</el-link>
          </template>
        </jc-table>
      </div>
    </div>
    <div class="form_body">
      <div>
        <jc-title title1="实时库存清单" :division="false" />
      </div>
      <inventory />
    </div>
    <div class="ranking_list">
      <div class="ranking ranking1">
        <jc-title title1="备料清单" :division="false" />
        <stockList />
      </div>
      <div class="ranking ranking1">
        <jc-title title1="出入库清单" :division="false" />
        <outInWarehouse />
      </div>
    </div>
    <!-- 异常报告弹窗 -->
    <el-dialog
      v-dialogDrag
      :visible.sync="compVisible"
      width="95%"
      top="3vh"
      center
      :before-close="beforeClose1"
    >
      <!-- 库存异常-警报库存 -->
      <alarmInventory v-if="alarmiVis" />
      <!-- 库存异常-库存过盛 -->
      <kcguoshen v-if="kcgsVis" />
      <!-- 库存异常-库存库龄 -->
      <stockAge v-if="stockAgeVis" />
      <!-- 库存异常-盘盈盘亏 -->
      <lossGain v-if="lossGainVis" :msg="lossGain" />
    </el-dialog>
  </div>
</template>

<script>
import { queryProductExceptionList } from '@/api/homePage/business'
import jcTitle from '@/components/Title'
import searData from '@/components/Search/mixin'
import inventory from '@/views/homePageNew/warehouseWMS/component/inventory'
import stockList from '@/views/homePageNew/warehouseWMS/component/stockList'
import outInWarehouse from '@/views/homePageNew/warehouseWMS/component/outInWarehouse'
export default {
  name: 'WarehouseWMS',
  components: {
    alarmInventory: () => import('@/views/repertory/alarmInventory'),
    stockAge: () => import('@/views/repertory/stockAge'),
    kcguoshen: () => import('@/views/homePageNew/taskNote/kcguoshen'),
    lossGain: () => import('@/views/homePageNew/taskNote/lossGain'),
    jcTitle,
    inventory,
    stockList,
    outInWarehouse
  },
  mixins: [searData],
  data() {
    return {
      compVisible: false,
      alarmiVis: false,
      kcgsVis: false,
      stockAgeVis: false,
      lossGainVis: false,
      lossGain: '',
      // 销售头部
      headerInfo: {},
      tableData: [],
      tableHeader: [
        { label: this.$t('market.date1'), prop: 'date', width: '100' },
        { label: this.$t('market.plaint'), prop: 'department', width: '120' },
        { label: this.$t('market.exception'), type: 'states', prop: 'exception' },
        { label: this.$t('market.abnormal1'), prop: 'abnormal' }
      ]
    }
  },
  created() {
    this.pooAmount()
  },
  methods: {
    // 跳转
    newlyOrder(path) {
      this.$router.push({ path: path })
    },
    // 经营异常
    openDialods(ev) {
      this.compVisible = true
      if (ev.exception.indexOf('安全库存警报') !== -1) {
        this.alarmiVis = true
      } else if (ev.exception.indexOf('库存过盛') !== -1) {
        this.kcgsVis = true
      } else if (ev.exception.indexOf('呆滞') !== -1) {
        this.stockAgeVis = true
      } else if (ev.exception.indexOf('盘亏') !== -1) {
        this.lossGainVis = true
        this.lossGain = '1'
      } else if (ev.exception.indexOf('盘盈') !== -1) {
        this.lossGainVis = true
        this.lossGain = '2'
      }
    },
    // 异常
    pooAmount() {
      queryProductExceptionList({ type: '库存异常' }).then(res => {
        if (res.code === 0) {
          this.tableData = res.data
        }
      })
    },
    beforeClose1() {
      this.compVisible = false
      this.alarmiVis = false
      this.kcgsVis = false
      this.stockAgeVis = false
      this.lossGainVis = false
    }
  }
}
</script>

<style scoped lang="scss">
@import 'src/styles/homePage';
.header {
  width: 100%;
  background: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0 0 5px;
  li {
    list-style: none;
    width: 12%;
    min-width: 165px;
    height: 70px;
    padding: 10px;
    background-color: rgb(64,158,255,0.1);
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    .firstHead {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      text-align: center;
      font-size: 16px;
      color: #FFF;
      background: #409EFF;
      padding: 5px 0;
      font-weight: 600;
      letter-spacing: 2px;
    }
    .lastHead {
      font-size: 28px;
      color: #666;
      line-height: 75px;
      font-weight: 500;
    }
  }
}
.hr1 {
  margin: 4px;
}
.ranking {
  margin: 10px 0 5px 0;
}
.form_body1 {
  .header-name {
    position: relative;
    top: -5px;
    margin-bottom: 10px;
    .btn {
      margin-left: 450px;
      transform: translateY(18%);
    }
  }
}
</style>
